<template>
  <div class="modal_com-wrapper">
    <!--@dblclick.prevent.stop='toHidden'-->
    <div class="ui long basic modal modal_com myscrolling" :class='type'>
      <div class="header">
        <slot name='header'></slot>
        <i class="icon remove" @click='toHidden'></i>
      </div>
      <div class="content">
        <slot name='content'></slot>
      </div>
      <div class="actions" v-if="actions">
        <button class="ui negative button">{{actions.negative}}</button>
        <button class="ui positive button">{{actions.positive}}</button>
      </div>
    </div>
  </div>
</template>
<script>
  import tool from 'src/util/tool';
   import util from '_util/index';

  export default {
    data() {
      return {
        interval_cleared: false,
        interval: null,
        refresh_times: 0,
        refreshed: false
      }
    },
    components: {},
    methods: {
      toHidden() {
        $(this.selector).modal('hide');
        this.clearMyInterval();
      },
      toShow() {
        let _that = this;
        this.refreshed = false;
        $(this.selector).modal({
          // blurring: true,
          duration: 10,
          allowMultiple: this.allowMultiple,
          onHidden: function () {
            _that.$emit('toHidden')
            util.store.push(_that, 'set_in_modal','in_modal',false,false,'global');
          },
          onVisible: function () {
            _that.$emit('onVisible')
            util.store.push(_that, 'set_in_modal','in_modal',false,true,'global');
            if (!_that.refreshed) {
//            $(_that.selector).modal('refresh');
              _that.refreshed = true;
            }
          },
          onDeny: function () {
            _that.$emit('toHidden')
          },
          onApprove: function () {
              util.store.push(_that, 'set_yes_event_hide', 'yes_event_hide', false, true, 'com');

//            $(_that.selector).modal('hide');
            _that.$emit('yes_event')
              let yes_event_hide = util.store.get(_that, 'yes_event_hide', 'com');
            return yes_event_hide;
          },
          //        inverted:true
//      }).modal('show');
        }).modal('show').modal('refresh');
      },
      setmyInterVal(){
        this.interval = window.setInterval(() => {
          $(this.selector).modal('refresh');
          this.refresh_times++;
          if (this.refresh_times > 5) {
            this.clearMyInterval();
          }
        }, 500);
      },
      clearMyInterval(){
        window.clearInterval(this.interval);
        this.interval = null;
        this.refresh_times = 0;
      }
    },
    watch: {
      modalShow(n, o) {
//       tool.cl(n, o)
        if (n != o) {
          if (n) {
            this.toShow();
            if (!this.interval && !this.interval_cleared && this.useSetIterval) {
              this.setmyInterVal();
            }
          } else {
            $(this.selector).modal('hide');

          }
        }
      }
    },
    computed: {
      selector() {
        return `.ui.modal_com.basic.modal.${this.type}`;
      }
    },
    props: {
      modalShow: {},
      is_click_see: {},
      allowMultiple: {
        default: false
      },
      useSetIterval: {
        default: false
      },
      actions: null,
      type: {
        default: 'search'
      }
    },
    created() {

    },
    mounted() {
    }
  }
</script>
<style rel="stylesheet/less" lang="less" scoped>@dir: "common/";
.header {
  position: relative;
}

i.remove {
  position: absolute;
  right: 10px;
  top: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 1);
  &:hover {
    color: rgba(255, 255, 255, 0.5);
  }
}


.ui.long.basic.modal.modal_com.fullscreen.active {
  overflow: auto;
}

.modals.dimmer {
  .ui.myscrolling.modal {
    position: static !important;
    margin: 3.5rem auto !important;
    margin-top: 3.5rem;
    margin-right: auto;
    margin-bottom: 3.5rem;
    margin-left: auto;
  }
  .ui.fullscreen.myscrolling.modal {
    left: 0 !important;
  }
}

</style>
